<template>
  <button @click="list.push(list.length + 1)">增加</button> <button @click="list.pop()">删除</button>
  <div class="container">
    <transition-group enter-active-class="animate__animated animate__flipInX"
                      leave-active-class="animate__animated animate__flipOutX">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </transition-group>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
const list = ref([
  1, 2, 3, 4, 5, 6
])

</script>

<style lang='scss' scoped>
.container {
  margin: 20px;
  display: flex;
  flex-direction: row;

  >div {
    padding: 20px;
    font-size: 2em;
    border: 1px solid #ccc;
    margin-left: -1px;
  }
  :first-child {
    margin-left: 0;
  }
}
</style>